<template>
  <div>
    <div>
      <a-typography>
        <a-typography-title :level="3">账户管理</a-typography-title>
      </a-typography>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :row-key="(record) => record.id"
        :loading="isLoading"
        bordered
      >
        <template #title>
          <a-button @click="addUser">add</a-button>
        </template>
        <template #username="{ text }">
          <a>{{ text }}</a>
        </template>
        <template #operate="{ record }">
          <a-button type="link" @click="editUser(record)" v-if="record.id != 0"
            >编辑</a-button
          >
          <a-popconfirm title="Are you sure？" @confirm="deleteUser()">
            <template #icon
              ><question-circle-outlined style="color: red"
            /></template>
            <a-button type="link" danger v-if="record.id != 0">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>

    <Drawer @register="registerDrawer" @success="successCallBack"></Drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Api } from "/@/api";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { useDrawer } from "/@/components";
import { columns } from "./index.data";
import Drawer from "./Drawer.vue";
import { useFetch } from "/@/hooks/useFetch";
export default defineComponent({
  components: { Drawer, QuestionCircleOutlined },
  setup() {
    const [registerDrawer, { openDrawer }] = useDrawer({
      width: "500px",
      placement: "right",
      keyboard: true,
      mask: true,
      // closable:false,
      title: "ddddd",
    });

    function editUser(val: any) {
      openDrawer(true, { ...{ isEdit: true }, ...val });
    }
    function addUser() {
      openDrawer(true, { isEdit: false });
    }
    function deleteUser() {
      useFetch(
        Api.user.deleteUser,
        {},
        () => {
          reload();
        }
      );
    }
    function successCallBack() {
      reload();
    }

    const {
      loading: isLoading,
      data: tableData,
      reload,
    } = useFetch(Api.user.getUserInfo);
    
    return {
      tableData,
      isLoading,
      columns,
      registerDrawer,
      editUser,
      addUser,
      deleteUser,
      successCallBack,
    };
  },
});
</script>
